<template>
  <div class="iframe">
    <div class="i-title">
      <h3>函数渲染</h3>
    </div>
    <div class="i-tip">
      {{ msg}}
    </div>
  </div>
</template>

<script>
  import {
    h
  } from "vue"
  import {
    ref
  } from "vue"
  export default {
    name: 'HelloWorld',
    setup() {
      let msg = ref("欢迎来到 Vue3 世界");
      // return {
      //   msg: msg.value
      // }
       return () => h("h3", msg.value)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  h3 {
    padding: 20px;
  }
</style>
